{% extends "base.html" %}

{% block content %}
<div class="page-title">
    <h3>在下方添加客户信息：</h3>
</div>
<div class="form-container">
    <form id="add-supplier-form">
        <label for="customer_id">客户编号：</label>
        <input type="number" id="customer_id" name="customer_id" class="input-field" required><br>
        <label for="customer_name">客户名称：</label>
        <input type="text" id="customer_name" name="customer_name" class="input-field" required><br>
        <label for="customer_short_name">客户简称：</label>
        <input type="text" id="customer_short_name" name="customer_short_name" class="input-field"><br>
        <label for="address">地址：</label>
        <input type="text" id="address" name="address" class="input-field"><br>
        <label for="company_phone">公司电话：</label>
        <input type="text" id="company_phone" name="company_phone" class="input-field"><br>
        <label for="email">邮件：</label>
        <input type="email" id="email" name="email" class="input-field"><br>
        <label for="contact_person">联系人：</label>
        <input type="text" id="contact_person" name="contact_person" class="input-field"><br>
        <label for="contact_phone">联系人电话：</label>
        <input type="text" id="contact_phone" name="contact_phone" class="input-field"><br>
        <label for="remarks">备注：</label>
        <textarea id="remarks" name="remarks" class="input-field"></textarea><br>
        <div class="button-container">
            <button type="submit" class="login-button">保存</button>
            <button type="reset" class="login-button" style="background-color: grey;">重置</button>
        </div>
    </form>
</div>

<script>
    document.getElementById('add-supplier-form').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        // Check if any of the critical fields are empty
        const criticalFields = ['customer_short_name', 'address', 'company_phone', 'email', 'contact_person', 'contact_phone'];
        let incomplete = false;
        for (const field of criticalFields) {
            if (!data[field]) {
                incomplete = true;
                break;
            }
        }

        // Prompt the user if information is incomplete
        if (incomplete) {
            if (!confirm('输入的信息不全，是否确定保存？')) {
                return;
            }
        }

        fetch('/api/suppliers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then(response => {
            if (response.ok) {
                alert('客户添加成功');
                this.reset();
            } else {
                response.json().then(data => {
                    alert('添加客户失败: ' + data.error);
                });
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('添加客户失败');
        });
    });

    document.querySelector('button[type="reset"]').addEventListener('click', function(event) {
        if (!confirm('是否确定重置已输入信息？')) {
            event.preventDefault();
        }
    });
</script>
{% endblock %}
